/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <div class="box">
    <div class="header" @click="handlerTitle">
      <b class="line"></b>
      消防安全技术实物
    </div>
    <div class="panel_box" ref="panel" :style="{height: panelHeight +　'px'}">
      <div class="panelContent" ref="panelContent">
        <ul>
          <li v-for="(item,index) in 5" :key="index">
            <p>【2019】一建《工程法规》考试分析及法规大纲复习</p>
            <span class="shiting">试听</span>
            <i class="iconfont icon-previewright"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // data: [Object],
    index: Number,
    // tableData: Object
  },
  data() {
    return {
      panelVis: false,
      height: 0,
      panelHeight: 0
    };
  },
  watch: {
    panelVis: function(data) {
      if (data) {
        this.panelHeight = this.height;
      } else {
        this.panelHeight = 0;
      }
    }
  },

  methods: {
    handlerTitle() {
      this.panelVis = !this.panelVis;
    }
  },
  mounted() {
    if(this.index === 0 ){
      this.panelVis = true;
    }
    let panelContent = this.$refs.panelContent;
    this.height = panelContent.offsetHeight;
  },
  components: {}
};
</script>
<style lang='less' scoped>
@import "../../util/theme.less";

.box {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: @white;

  .header {
    .mix-flex-center();
    justify-content: flex-start;
    height: 42px;
    .line {
      width: 3px;
      height: 18px;
      background: @red;
      margin: 0 8px 0 6px;
    }
    .left {
      flex: 1;
      .mix-text-overflow();
    }
    .middle {
    }

    .right {
      width: 30px;
      .mix-flex-center();

      i {
        color: @font-regular;
      }
    }
  }

  .panel_box {
    width: 100%;
    height: auto;
    transition: all 0.3s;
    overflow: hidden;
    border-top: 1px solid @border-base;
    ul {
      width: 100%;
      padding-left: 20px;
      border-bottom: 1px solid @border-base;
      li {
        height: 42px;
        .mix-flex-center();
        justify-content: flex-start;
        border-bottom: 1px solid @border-base;
        padding-left: 10px;
        p{
          .mix-text-overflow();
        }
        .shiting{
          width: 40px;
          font-size: 13px;
          color: @primary;
          text-align: center;
        }
        .iconfont{
          width: 30px;
          height: 100%;
          display: inline-block;
          .mix-flex-center();
          color: @font-secondary;
        }
      }
    }
  }
}

.iconfont {
  transition: all 0.3s;
}

.iconshow {
  transform: rotate(90deg);
}

.iconhide {
  transform: rotate(0deg);
}
</style>
